<template>
  <div id="app">
    <main>
      <div v-for="(item,index) in foot" :key="index">
        <div :is="item.name" v-if="index==activeIndex"></div>
      </div>
    </main>
    <footer>
      <Tabfooter :foot="foot" :activeIndex="activeIndex"></TabFooter>
    </footer>
  </div>
</template>

<script>
import Tabfooter from "./components/body/FabFooter.vue";
import FindRoom from "./components/body/FindRoom.vue";
import Home from "./components/body/Home.vue";
import Message from "./components/body/Message.vue";
import My from "./components/body/My.vue";
import Release from "./components/body/Release.vue";

export default {
  name: "App",
  data() {
    return {
      activeIndex: 0,
      foot: [
        {
          name: "FindRoom",
          title:"找房"
        },
        {
          name: "Home",
          title:"首页"
        },
        {
          name: "Message",
          title:"消息"
        },
        {
          name: "My",
          title:"我的"
        },
        {
          name: "Release",
          title:"发布"
        }
      ],
    };
  },
  components: {
    Tabfooter,
    FindRoom,
    Home,
    Message,
    My,
    Release,
  },
  mounted()
  {
    this.bus.$on("changeActive",(index)=>
    {
      this.activeIndex=index;
    })
  }
};
</script>

<style>
*{
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}
html,body,#app{
  width: 100%;
  height: 100%;
}
#app{
  display: flex;
  flex-direction: column;
}
#app main{
  flex: 1;
  overflow-y:scroll ;
}
#app footer{
  width: 100%;
  height: 60px;
  background-color: rgb(60, 120, 199);
}
#app footer ul{
  display: flex;
  justify-content: space-around;
  line-height: 60px;
}
</style>
